var WidgetPanel=Base.extend({
	constructor : function(){
		this.panel=$(document.createElement('div')).addClass('panel').css({width: '250px'}).appendTo($('.edit'));
		this.tabs;
		this.widget={};
		this.tabCount=0;
	},
	load:function(widget){
		if(typeof widget.template!='undefined')  {

			var count=$("#template"+ widget.wid+" option").length;
			for(var i=0;i<count;i++){           
				if($("#template"+ widget.widget_id).get(0).widget[i].text == text){  
					//alert(widget.widget_id);
		            $("#template"+ widget.widget_id).get(0).widget[i].selected = true;  
					break;  
				}  
			} 

		}
	},
	initPageSet:function(widgetvalues){
		var me=this;
					this.panel.load(JWidgetOption.panelUrl+"/loadPanel",function(){
						me.tabs = $( "#tabs").tabs({
							tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
							// add: function( event, ui ) {
								// $( ui.panel ).load( JWidgetOption.panelUrl+"/load"+wv.classname,{'widget':wv},function(response,status,xhr){
									// // alert(status);
					  			// me.tabs.tabs( "option", "selected",ui.index);
								// widlist.push(wv.wid);
// 								
							// });
							// },
							remove: function(event, ui) { 
								me.tabCount-=1;
							},
							select: function(event, ui) {				
							}
					});
					
					me.tabs.bind( "tabsadd", function(event, ui) {
								alert(ui.panel);
								$( ui.panel ).load( JWidgetOption.panelUrl+"/load"+widget.classname,{'widget':widget},function(response,status,xhr){
									// alert(status);
					  			me.tabs.tabs( "option", "selected",ui.index);
								widlist.push(widget.wid);
								
							});
						});
						
								for(var j=0;j<widgetvalues.length;j++){
									var widget=widgetvalues[j];
									me.tabs.tabs( "add", "#tabs-" + widget.wid, widget.cntitle );
									me.tabCount+=1;
									// me.add(wv);
									
							}
							me.drag();
				});
			// this.tabs.tabs( "add", "#tabs-" + widgetvalue.wid, widgetvalue.cntitle );
					$( "#tabs span.ui-icon-close" ).live( "click", function() {
				var index = $( "li", $( "#tabs") ).index( $( this ).parent());
					me.tabs.tabs( "remove", index );
					widlist=widlist.deleteElementByIndex(index);
					// alert(widlist.length);
			});

	},
	init:function(widget){
		

		var me=this;
		this.widget=widget;
		
		this.panel.load(JWidgetOption.panelUrl+"/loadPanel",{'widget':widget},function(){
			//alert(widget);
			
			me.tabs = $( "#tabs").tabs({
				tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
				add: function( event, ui ) {
					// alert(JSON.stringify(eval($( ui.panel ))));
					$( ui.panel ).load( JWidgetOption.panelUrl+"/load"+me.widget.classname,{'widget':me.widget},function(response,status,xhr){
					  // me.tabs.tabs( "option", "selected",ui.index);
					  
					   me.tabs.tabs('select', '#' + ui.panel.id);
						widlist.push(me.widget.wid);
					});
					
					},
				remove: function(event, ui) { 
						me.tabCount-=1;
				},
				select: function(event, ui) {				
				}
				});
				
				// me.tabs.bind( "tabsadd", function(event, ui) {
							// $( ui.panel ).load( JWidgetOption.panelUrl+"/load"+widget.classname,{'widget':widget},function(response,status,xhr){
									// // alert(status);
					  			// me.tabs.tabs( "option", "selected",ui.index);
								// widlist.push(widget.wid);
// 								
							// });
							// alert(0);
						// });
				me.tabs.tabs( "add", "#tabs-" + widget.wid, widget.cntitle );
				// me.add(widget);
				// me.resize();
				me.drag();
				

						
			});
			$( "#tabs span.ui-icon-close" ).live( "click", function() {
				var index = $( "li", $( "#tabs") ).index( $( this ).parent());
					me.tabs.tabs( "remove", index );
					widlist=widlist.deleteElementByIndex(index);
					// alert(widlist.length);
			});

		
	},
	add:function(widget){
		var me=this;
		this.widget=widget;
		// this.tabs.bind( "tabsadd", function(event, ui) {
		//   if(jwidget.classname=='Page')alert(jwidget.classname);
		// 	 $( ui.panel ).load( "/mr8/index.php?r=jwidget/panel/load"+jwidget.classname,{'widget':jwidget},function(){
		// 	   me.tabNum+=1;
		// 	   // if(widget.classname=='Page')alert(me.tabNum);
		// 	    me.tabs.tabs( "option", "selected",0);
		// 	 });
		// });
    	this.tabCount+=1;
    	this.tabs.tabs( "add", "#tabs-" + widget.wid, widget.cntitle,this.tabCount);	


	},
	//save:function(){},
	/**
 * 上传数据到服务器
 * 
 */
	save: function(){ 
	 			
		// $.post(JWidgetOption.saveUrl,{'widgets':jwidgets,'pageNo':1},
		alert(JSON.stringify(eval(jwidgets)));
		$.post(JWidgetOption.saveUrl,{'widgets':jwidgets,'pageNo':1},
		  function(data,status){
		            // me.id = data.id;
		            // me.widget.timeoutPid = null;
		            // if(typeof me.widget.saveCallback == 'function'){
		              // me.widget.saveCallback(data,status);
		            // }
		            // me.changed(false);
		            
		            // alert(eval(data));
		            
		          },
        'json');
        
        //$( this.tabs).load( JWidgetOption.saveUrl,{'widgets':jwidgets,'pageNo':1});
        
	},
	remove:function(){//alert('remove');
	},

	resize:function(){
		this.panel.resizable();
		this.panel.bind("resizestop",function(event,ui){
			//alert(ui.size.width+"|"+ui.size.height);
		});
   },
	drag:function(){
		this.panel.draggable({ cursor: 'crosshair',handle:".draghandle",containment:'.edit'});
		this.panel.bind( "dragstop", function(event, ui) {
			//alert(ui.position.top+"|"+ui.position.left);
		});
   },

});